﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="/Plugins/layui/css/layui.css" rel="stylesheet" />
    <link href="/Plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/content/lgm/css/css3.css" rel="stylesheet" />
    <link href="/content/lgm/css/style.css" rel="stylesheet" />
    <link href="/content/lgm/css/lgform.css?v=20220919" rel="stylesheet" />
    <script src="/Plugins/common/jquery.js"></script>
    <script src="/Plugins/common/vue.3.2.js"></script>
    <script src="/Plugins/layer/layer.js"></script>
    <script src="/Plugins/common/lg.base.js?v=1.1"></script>
    <script src="/content/lg.form.js"></script>
</head>
<body>
    <div class="layui-card" id="lg-PlanList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>开班计划</div>
    <div class="layui-card-body" id="">
        <form class="layui-form" lay-filter="SForm">
            <div class="lg-search-item">
                <label class="ts-label">学年</label>
                <div class="layui-input-inline" style="width: 130px">
                    <select name="Year" class="layui-select">
                        <option value="">请选择</option>
                        @{
                            int year = DateTime.Now.Year;
                        }
                        <option value="@(year - 1)">@(year - 1)~@year</option>
                        <option value="@year">@year~@(year + 1)</option>
                        <option value="@(year + 1)">@(year + 1)~@(year + 2)</option>
                    </select>
                </div>
            </div>
            <div class="lg-search-item">
                <label class="ts-label">学期</label>
                <div class="layui-input-inline" style="width: 100px">
                    <select name="Semester" class="layui-select">
                        <option value=""></option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </div>
            <div class="lg-search-item">
                <label class="ts-label">年级</label>
                <div class="layui-input-inline" style="width: 200px">
                    <select name="GradeId" class="layui-select" id="Grades" lay-filter="Grades">
                        <option value="">请选择</option>
                        <option v-for="item in grades" :value="item.Value">{{item.Text}}</option>
                    </select>
                </div>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" lay-submit lay-filter="bt_Search" :data-id="pageId">搜索</button>
            </div>
        </form>
        <div class="lg-form-box">
            <table class="layui-hide" id="PlanList" lay-filter="PlanList"></table>
        </div>
        <!-- 内容主体区域结束 -->
    </div>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="fa fa-plus fa-fw"></i>添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
    </div>
</script>
<script type="text/html" id="btTpl">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" title="编辑"><span class="fa fa-pencil-square-o fa-fw "></span></a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="del" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
    <a class="layui-btn layui-btn-xs" lay-event="apply" title="添加学生"><span class="fa fa-user-plus fa-fw"></span></a>
</script>
<script>
    Vue.createApp({
                data() {
                    return {
                        plans: [],
                        grades: [],
                        pageId: page.id,
                    }
                },
                computed: {

                },
                mounted: function() {
                    this.GetGrades();
                    this.TableRender();
                },
                methods: {
                    showPage: function() {
                        Pages.RedirectTo({
                            url: "/lgm/apply/Plan/List",
                            title: "开班计划"
                        })
                    },
                    GetGrades: function() {
                        lg.request({
                            url: "/api/sys/apply/GetGradesFromPlan",
                            success: res => {
                                if (res.code == 0) {
                                    this.grades = res.data;
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    TableRender: function() {
                        layui.use(['table', 'element', 'form'], function() {
                            var table = layui.table;
                            var form = layui.form;
                            form.render();
                            page.laytable = table.render({
                                elem: '#PlanList'
                                , url: '/api/sys/apply/GetPlanList'
                                , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                                , cols: [[
                                    { type: 'checkbox' }
                                    , {
                                        field: 'Id', title: '序号', width: 80, templet: function(d) {
                                            return d.LAY_TABLE_INDEX + 1;
                                        }
                                    }
                                    , { field: 'Title', title: '计划名称' }
                                    , { field: 'Year', title: '学年', width: 120, }
                                    , { field: 'Semester', title: '学期', width: 120, }
                                    , { field: 'Register', title: '已报', width: 120, }
                                    , {
                                        field: 'IsOpen', title: "开启报名", width: 120, templet: function(d) {
                                            return laySwitch.render(d.IsOpen, 'open')
                                        }
                                    }
                                    , { field: 'SortNumber', title: '权重排序', width: 120, }
                                    , { fixed: 'right', title: '操作', width: 160, toolbar: '#btTpl' }
                                ]]
                                , page: true
                            });
                            table.on('toolbar(PlanList)', function(obj) {
                                var checkStatus = table.checkStatus(obj.config.id);
                                switch (obj.event) {
                                    case 'add':
                                        frame.NavigateTo({
                                            url: "/lgm/apply/plan/add",
                                            title: "发布招生计划"
                                        })
                                        break;
                                    case 'refresh':
                                        page.laytable.reload();
                                        break;
                                };
                            })
                            table.on('tool(PlanList)', function(obj) {
                                var data = obj.data;
                                switch (obj.event) {
                                    case 'edit':
                                        frame.NavigateTo({
                                            url: "/lgm/apply/plan/edit/" + data.Id,
                                            title: "编辑计划"
                                        })
                                        break;
                                    case 'open':
                                        laySwitch.do({
                                            obj: obj,
                                            key: "IsOpen",
                                            url: "/api/sys/apply/EditPlan",
                                            refresh: function() {
                                                page.laytable.reload();
                                            }
                                        })
                                        break;
                                    case "del":
                                        layer.confirm('真的删除行么', function(index) {
                                            lg.request({
                                                url: "/api/sys/apply/deletePlan",
                                                method: "post",
                                                data: { id: data.Id },
                                                success: res => {
                                                    if (res.code == 0) {
                                                        obj.del();
                                                    }
                                                }
                                            })
                                            layer.close(index);
                                        });
                                        break;
                                    case "apply":
                                        frame.NavigateTo({
                                            url: "/lgm/apply/apply/add/" + data.Id,
                                            title: "添加学生"
                                        })
                                        break;
                                };
                            })
                        });
                    },
                    reload: function() {
                        this.laytable.reload();
                    }
                },
                updated: function() {
                    layui.form.render();
                }
            }).mount("#lg-PlanList")
</script>

</body>
</html>
